<template>
  <!-- dialog就是弹框 -->
  <!-- :visible.sync="visible"如果不加.sync,那么在父组件打开弹框后,再去点击页面其他的位置,就不能关闭弹框 -->
  <el-dialog title="新增员工" :visible.sync="visible">
    <!-- 表单 -->
    <!-- 注意,:model="form"这是Emelent官网定义的绑定方法,如果:form='form'就无法触发表单的效验哦 -->
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input
          v-model="form.username"
          style="width:50%"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机">
        <el-input
          v-model="form.mobile"
          style="width:50%"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          v-model="form.timeOfEntry"
          style="width:50%"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="聘用形式">
        <el-select
          v-model="form.formOfEmployment"
          style="width:50%"
          placeholder="请选择"
        >
          <!-- vlaue是选中的值,lable是给用户看的值 -->
          <!-- 这里遍历的是枚举api/constant/employees.js'里面的hireType数组 -->
          <!-- 讲正式和非正式显示到,聘用形式的选择框里面 -->
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :value="item.id"
            :label="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-input
          v-model="form.workNumber"
          style="width:50%"
          placeholder="请输入工号"
        />
      </el-form-item>
      <el-form-item label="部门">
        <el-input
          @focus="getTreeData"
          v-model="form.departmentName"
          style="width:50%"
          placeholder="请选择部门"
        />
        <!-- Tree 树形控件 -->
        <!-- el-tree组件的内部,定义了这句代码this.$emit(node-click='data') -->
        <!-- 所以这个handleNodeClick才可以传入data,下面可以打印出来当前这行的数据 -->
        <!-- 子组件可以使用 $emit 触发父组件的自定义事件 -->
        <el-tree
          v-show="showTree"
          class="my-tree"
          :data="TreeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-form-item>
      <el-form-item label="转正时间">
        <el-date-picker
          v-model="form.correctionTime"
          style="width:50%"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <!-- footer插槽,作用域插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small">取消</el-button>
          <el-button @click="submitForm" type="primary" size="small"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// getDepartments,查询企业的部门列表的接口(7月13号departments/index.vue也用了)
import { getDepartments } from '../../../api/departments.js'
// 导入数据转数组的方法
import { formtData } from '../../../utils/index.js'
// 导入抽取的对应关系 (枚举)
import EmployeesEnum from '../../../api/constant/employees.js'
// addEmployee添加员工列表的接口
import { addEmployee } from '../../../api/employees.js'
export default {
  name: 'EmployeeDialog',

  data () {
    return {
      visible: false,
      form: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      formLabelWidth: '120px',
      // 设置文本和 后代属性的对应关系
      // label: 'name' 当前这个案例需要定义name才能显示树形结构获取到的名字
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      TreeData: [], // 树的数据
      showTree: false, // 默认不显示树形样式
      // 聘用形式的对应关系
      hireType: EmployeesEnum.hireType // hireType 就是api/constant/employees.js里面的一个数组
    }
  },
  methods: {
    // 提交表单
    async submitForm () {
      // console.log('linlin')
      const res1 = await addEmployee(this.form)
      // console.log('res1', res1)
      this.visible = false
      this.$message.success('新增成功')
      this.$parent.getData()
      this.form = {}
    },
    // @focus="getTreeData" 获取树的,数据
    async getTreeData () {
      const res = await getDepartments()
      // 打印出来是一个数组, 所以需要把他变成树形结构
      // console.log('res', res)
      // 打印出来数据在在depts里面的,所以
      //   打data中的TreeData数据,转为树形结构
      this.TreeData = formtData(res.depts, '')
      // 显示树,tree
      this.showTree = true
    },
    // Tree 树形控件的点击事件
    handleNodeClick (data) {
      // 点击树形里面的获取到的数据后,就可以打印出当前这一项的data数据
      // 里面有createTime: "2021-03-14 22:47:25", id: "604e21feb205b95968e13129"
      // introduce: "公司战略部"manager: "管理员"name: "总裁办"
      //   console.log('data', data)
      //   所以把数据保存在data的form表单里面
      //   记得要在选择部门的标签定义   v-model="form.departmentName"
      this.form.departmentName = data.name
      //   关闭tree树组件
      this.showTree = false
    }
  }
}
</script>

<style>
.my-tree {
  width: 50%;
  border: 1px solid #c4c4c4;
  margin-top: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 999;
}
</style>
